<template>
  <div class="hezi">
    <div class="anniu">
      <el-button
        type="primary"
        icon="el-icon-plus"
        style="margin-top: 30px;"
        @click="xinzengbtn"
      >新建</el-button>
      <el-button icon="el-icon-minus" @click="shanchu()">删除</el-button>
      <el-button
        type="primary"
        icon="
         el-icon-refresh-right"
        @click="shuaxin"
      >刷新</el-button>
      <el-button type="primary" style="margin-left: 680px;">导入客户</el-button>
    </div>
    <div class="anniu xiala">
      <!-- <el-select slot="prepend" v-model="select" placeholder="请选择仓库" class="leixing">
        <el-option v-for="item in chaxun.chucuncangkulist" :key="item.id" v-model="item.name" :label="item.Name" :value="item.name" />
      </el-select> -->
      <el-select v-model="selectedId" placeholder="请选择仓库">
        <el-option v-for="item in chucuncangkulist" :key="item.Id" :label="item.Name" :value="item.Id" />
      </el-select>
      <el-input v-model="chaxun.Keyword" placeholder="货位/巷道/货架" class="bianhao" />
      <el-input v-model="chaxun.AreaName" placeholder="客户编号或名称" class="bianhao" />
      <el-button type="primary" style="margin-left: 10px;" @click="BtnCx(chaxun)">查询</el-button>
      <el-button @click="chongzhi()">重置</el-button>
    </div>
    <div class="biaoge">
      <el-table
        ref="multipleTable"
        :data="list"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="货位编号" width="120">
          <template slot-scope="scope">{{ scope.row.Code }}</template>
        </el-table-column>
        <el-table-column prop="Name" label="货位名称" width="100">
          <template v-slot="{ row }">{{ row.Name }}</template>
        </el-table-column>
        <el-table-column prop="Name" label="仓库" width="100">
          <template v-slot="{ row }">{{ row.PB_Storage?.Name }}</template>
        </el-table-column>
        <el-table-column prop="Name" label="货区" width="100">
          <template v-slot="{ row }">{{ row.PB_StorArea?.Name }}</template>
        </el-table-column>
        <el-table-column prop="Name" label="巷道" width="100">
          <template v-slot="{ row }">{{ row.PB_Laneway?.Name }}</template>
        </el-table-column>
        <el-table-column prop="Name" label="货架" width="100">
          <template v-slot="{ row }">{{ row.PB_Rack?.Name }}</template>
        </el-table-column>
        <el-table-column prop="Name" label="余量" width="100">
          <template v-slot="{ row }">{{ row.OverVol }}</template>
        </el-table-column>
        <el-table-column prop="tag" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.IsForbid ? 'primary' : 'danger'" disable-transitions>
              {{ scope.row.IsForbid ? '启用' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="tagss" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.IsDefault ? 'primary' : 'danger'" disable-transitions>
              {{ scope.row.IsDefault ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="open(scope.row.Id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- dialog 弹窗 -->
    <el-dialog :title="biaotou" :visible.sync="dialogFormVisible">
      <el-form ref="ruleForm" :model="ruleForm" class="flex-container" :rules="rules">
        <div>
          <el-form-item prop="Code" label="货位编号" :label-width="formLabelWidth" class="flex-item">
            <el-input v-model="ruleForm.Code" disabled autocomplete="off" width="40%" placeholder="系统自动生成" />
          </el-form-item>
          <el-form-item prop="StorId" label="仓库" :label-width="formLabelWidth">
            <el-select v-model="ruleForm.StorId" placeholder="请选择仓库" @change="genggaishi(ruleForm.StorId)">
              <el-option v-for="item in chucuncangkulist" :key="item.Id" :label="item.Name" :value="item.Id" />
            </el-select>
          </el-form-item>
          <el-form-item prop="LanewayId" label="巷道" :label-width="formLabelWidth">
            <el-select v-model="ruleForm.LanewayId" placeholder="请选择巷道">
              <el-option v-for="item in xiangdaolist" :key="item.Id" :label="item.Name" :value="item.Id" />
            </el-select>
          </el-form-item>
          <el-form-item prop="IsForbid" label="是否禁用" :label-width="formLabelWidth">
            <el-switch v-model="ruleForm.IsForbid" />
          </el-form-item>
          <el-form-item prop="IsDefault" label="是否默认" :label-width="formLabelWidth">
            <el-switch v-model="ruleForm.IsDefault" />
          </el-form-item>
        </div>
        <div>
          <el-form-item prop="Name" label="货位名称" :label-width="formLabelWidth" class="flex-item">
            <el-input v-model="ruleForm.Name" autocomplete="off" width="40%" />
          </el-form-item>
          <el-form-item prop="AreaId" label="货区" :label-width="formLabelWidth">
            <el-select v-model="ruleForm.AreaId" placeholder="请选择货区">
              <el-option v-for="item in huoqulist" :key="item.Id" :label="item.Name" :value="item.Id" />
            </el-select>
          </el-form-item>
          <el-form-item prop="RackId" label="货架" :label-width="formLabelWidth">
            <el-select v-model="ruleForm.RackId" placeholder="请选择货架">
              <el-option v-for="item in huojialist" :key="item.Id" :label="item.Name" :value="item.Id" />
            </el-select>
          </el-form-item>
          <el-form-item prop="OverVol" label="剩余容量" :label-width="formLabelWidth" class="flex-item">
            <el-input v-model="ruleForm.OverVol" autocomplete="off" />
          </el-form-item>
          <el-form-item prop="Remarks" label="备注" :label-width="formLabelWidth" class="flex-item">
            <el-input v-model="ruleForm.Remarks" autocomplete="off" />
          </el-form-item>
        </div>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button v-if="biaotou === '新增货位'" type="primary" @click="btnQd()">确定新增</el-button>
        <el-button v-else type="primary" @click="btnXG()">确定修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { GetDataList, DeleteData, GetStorage, GetDataListByStor, GetDataListBy, GetData, SaveData, QueryStorAreaData,
  QueryLanewayData, QueryRackData, GetTheData
} from '@/api/huoweiguanli'
export default {
  name: 'HuoWeiMangge',
  data() {
    return {
      selectedId: null,
      select: '',
      input: '',
      list: [],
      data: {
        pageIndex: 1,
        pageRows: 10,
        sortField: 'Id',
        sortType: 'asc',
        search: {}
      },
      biaotou: '',
      dialogFormVisible: false,
      ruleForm: {
        Code: '', // 编号
        Name: '', // 货位名称
        StorId: '', // 仓库ID
        AreaId: '', // 货区id
        LanewayId: '', // 巷道id
        RackId: '', // 货架id
        OverVol: '', // 剩余容量
        IsForbid: false, // 是否禁用
        IsDefault: false, // 是否默认
        Remarks: '' // remarks备注
      },
      formLabelWidth: '120px',
      xialakuangshuju: '', // 下拉框选中的数据
      chucuncangkulist: [],
      huoqulist: [],
      xiangdaolist: [],
      huojialist: [],
      newlist: [],
      chaxun: {
        StorId: '',
        Keyword: '',
        AreaName: ''
      },
      rules: {
        Name: [
          { required: true, message: '请输入货位名称', trigger: 'blur' }
        ],
        StorId: [
          { required: true, message: '请选择仓库', trigger: 'blur' }
        ],
        AreaId: [
          { required: true, message: '请选择货区', trigger: 'blur' }
        ],
        IsForbid: [
          { required: true, message: '请选择禁用状态', trigger: 'blur' }
        ],
        IsDefault: [
          { required: true, message: '请选择默认状态', trigger: 'blur' }
        ],
        RackId: [
          { required: true, message: '请选择默认状态', trigger: 'blur' }
        ],
        LanewayId: [
          { required: true, message: '请选择货架', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    console.log('页面加载前')
    this.huoqushuju()
    this.getCangkulist()
  },

  methods: {
    // 点击取消
    quxiao() {
      console.log('点击了取消')
      this.dialogFormVisible = false
      this.ruleForm = {}
    },
    // 点击新建
    xinzengbtn() {
      this.dialogFormVisible = true
      this.biaotou = '新增货位'
    },
    // 编辑 获取数据
    async handleClick(row) {
      this.dialogFormVisible = true
      this.biaotou = '编辑数据'
      console.log(row)
      console.log(row.Id)
      // 查询货区
      const huoqu = await QueryStorAreaData()
      console.log(huoqu)
      // 查询巷道
      const xiangdao = await QueryLanewayData()
      console.log(xiangdao)
      // 查询货架
      const huojia = await QueryRackData()
      console.log(huojia)
      // 获取仓库数据
      const cangkulist = await GetStorage()
      console.log(cangkulist)
      // 拿id 获取数据
      const shujulist = await GetTheData(row)
      console.log(shujulist)
      this.ruleForm.Code = shujulist.Code
      this.ruleForm.IsDefault = shujulist.IsDefault
      this.ruleForm.IsForbid = shujulist.IsForbid
      this.ruleForm.Name = shujulist.Name
      this.ruleForm.OverVol = shujulist.OverVol
      this.ruleForm.Remarks = shujulist.Remarks
      this.ruleForm.StorId = shujulist.StorId
      console.log(shujulist.StorId)
      this.newlist = shujulist
      // 查询货区所属仓库
      const huoqushuju = await GetDataListByStor(shujulist.StorId)
      console.log(huoqushuju)
      this.ruleForm.AreaId = huoqushuju[0].Name
      // 查询巷道所属仓库
      const xiangdaoshuju = await GetDataListBy(shujulist.StorId)
      this.ruleForm.LanewayId = xiangdaoshuju[0].Name
      // 查询货架所属仓库
      const huojialist = await GetData(shujulist.StorId)
      this.ruleForm.RackId = huojialist[0].Name
    },
    // 表单 选下拉列表数据 更改时
    async genggaishi(id) {
      console.log('更改下拉列表数据')
      console.log(id)
      // 查询货区所属仓库
      this.huoqulist = await GetDataListByStor(id)
      console.log(this.huoqulist, 123)
      // 查询巷道所属仓库
      this.xiangdaolist = await GetDataListBy(id)
      console.log(this.xiangdaolist)
      // 查询货架所属仓库
      this.huojialist = await GetData(id)
      console.log(this.huojialist)
    },
    // 删除 选中下拉框的内容
    async shanchu() {
      console.log('删除选中下拉框的内容')
      console.log(...this.xialakuangshuju.map(item => item.Id))
      await DeleteData([...this.xialakuangshuju.map(item => item.Id)])
      this.$message({
        message: '删除成功',
        type: 'success'
      })
      this.huoqushuju()
    },
    // 重置 查询选项
    chongzhi() {
      console.log('重置按钮')
      this.chaxun = ''
    },
    // 刷新按钮
    shuaxin() {
      this.huoqushuju()
    },
    open(id) {
      const h = this.$createElement
      this.$msgbox({
        title: '删除',
        message: h('p', null, [
          h('span', null, '确认删除吗？ '),
          h('i', { style: 'color: teal' })
        ]),
        showCancelButton: true,
        confirmButtonText: '确定删除',
        cancelButtonText: '取消'
      }).then(async action => {
        console.log('确定删除')
        console.log(id)
        await DeleteData([id])
        this.$message({
          type: 'success',
          message: '删除成功'
        }
        )
        this.huoqushuju()
      })
    },
    handleSelectionChange(val) {
      console.log(val)
      this.xialakuangshuju = val
      console.log(...this.xialakuangshuju.map(item => item.Id))
    },
    async huoqushuju() {
      const res = await GetDataList(this.data)
      this.list = res
      console.log(this.list)
    },
    // 新增点击确定
    async btnQd() {
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          // 向后台发送请求
          console.log(this.ruleForm)
          await SaveData(this.ruleForm)
          this.$message({
            message: '新增成功',
            type: 'success'
          })
          this.dialogFormVisible = false
          this.$refs.ruleForm.resetFields()
          this.huoqushuju()
        } else {
          // 就像用户提示发生错误的消息
        }
      })
    },
    // 编辑点击确定
    async btnXG() {
      console.log(this.newlist)
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          // 向后台发送请求
          // console.log(this.ruleForm)
          this.newlist.Name = this.ruleForm.Name
          this.newlist.IsDefault = this.ruleForm.IsDefault
          this.newlist.IsForbid = this.ruleForm.IsForbid
          this.newlist.LanewayId = this.ruleForm.LanewayId
          this.newlist.OverVol = this.ruleForm.OverVol
          this.newlist.RackId = this.ruleForm.RackId
          this.newlist.Remarks = this.ruleForm.Remarks
          this.newlist.StorId = this.ruleForm.StorId
          console.log(this.newlist)
          await SaveData(this.newlist)
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.dialogFormVisible = false
          this.$refs.ruleForm.resetFields()
          this.huoqushuju()
        } else {
          // 就像用户提示发生错误的消息
        }
      })
    },
    async getCangkulist() {
      const res = await GetStorage()
      this.chucuncangkulist = res
      console.log(this.chucuncangkulist)
    },
    async BtnCx(getlist) {
      console.log('查询按钮')
      console.log(getlist)
      console.log(this.selectedId)
      this.chaxun.StorId = this.selectedId
      console.log(this.chaxun.StorId)
      console.log(this.chaxun)
      this.data.search = this.chaxun
      const res = await GetDataList(this.data)
      console.log(res)
      this.$message({
        message: '查询成功',
        type: 'success'
      })
      this.list = res
    }
  }

}
</script>
<style scoped>
.flex-container {
  display: flex;
}

.flex-item {
  flex: 1;
}

.biaoge {
  margin-left: 30px;
  margin-top: 20px;
  width: 1200px;
}

.bianhao {
  width: 250px;
  margin-left: 10px;
}

.hezi {
  width: 1400px;
  margin: 20px auto;
  background: rgb(255, 255, 255);
}

.anniu {
  margin-left: 30px;
  margin-top: 20px;
  width: 1200px;
  height: 50px;
}

.xiala {
  margin-top: 40px;
}

.leixing {
  width: 250px;
}
</style>
